vue3新语法

最新推荐文章于 2024-04-01 09:50:15 发布
最新推荐文章于 2024-04-01 09:50:15 发布
阅读量6.9k 收藏 132
点赞数 32
文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43638968/article/details/114260999
版权

vue3特点

https://www.bilibili.com/video/BV1VK4y1o7GS?from=search&seid=9785264573525132044

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）
作用: 聚合代码 & 逻辑重用

一、知识点

  1. 使用defineComponent 构建应用及绑定事件
  2. 使用setup(props,content)父子通信
  3. 使用 reactive 绑定数据
  4. 使用 ref ( torefs ) 绑定数据
  5. 使用 getCurrentInstance 获取当前实例化对象上下文信息
  6. watch、watchEffect 数据监听
  7. 生命周期+axios数据请求
  8. 简单的 TodoList 点餐功能

1.使用 reactive 绑定数据

<template>
  <div>
    <h1>使用 reactive 绑定数据</h1>
    <p>{{state.msg}}</p>
    <p>{{info}}</p>
    <p>
      <button @click="changeMsg">changeMsg</button>
    </p>
  </div>
</template>
<script>

// Hooks 编程，在 vue 中导入对应的函数方法，面向函数式进行编程
// Vue-composition-API 这里就是Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

import { defineComponent, reactive } from "vue";
export default defineComponent({
  name: 'test1',
  setup() {  // setup钩子函数
    // 使用响应式函数reactive构建proxy响应式对象state
    const state = reactive({
      msg: '时光'
    })
    console.log(state); // state对象是一个proxy拦截对象
    let info = 'hello'; // info是一个普通对象，修改后不会被proxy拦截，进而页面也不会动态更新
    const changeMsg = () => { // 在外边定义methods
      state.msg = '时光，你好'
      info = 'hello，你好'
    }
    return {  // 使用时，要把对象return出去，才能在template中使用
      state,
      info,
      changeMsg
    }
  }
})
</script>

2. setup()函数 完成父子通信

1. setup(props)第一个参数props

setup函数接收props作为其第一个参数，props对象是响应式的(单向的父—>子)，watchEffect或watch会观察和响应props的更新。不要对props对象进行解构，那样会失去响应性。在开发过程中，props对象对用户空间代码时不可变的，用户尝试修改props时会触发警告。

案例1:props作为setup的第一个参数

// 父组件 Home.vue
<template>
  <div class="home">
    <About :name="sendData"/>
  </div>
</template>
<script>
  import {ref} from 'vue'; 
  import About from './About'
  export default{
    components:{
      About,
    },
    setup(){
      const sendData = ref('这世界很酷');
      return {
        sendData
      }
    }
  }
</script>

// 子组件About.vue
<template>
  <div class="about">
  {{propContent}}
  </div>
</template>
<script>
  import {watchEffect} from 'vue';
  export default{
    props:{
      name:String
    },
    setup(props){
      let propContent= props.name;
     // watchEffect(()=>{
     //   propContent = props.name
     //})
      return {
        propContent
      }
    }
  }
</script>

2. setup(props,context)第二个参数Context上下文对象

// 父组件 Home.vue
<template>
  <div class="home">
    <About :name="sendData.val" @name-changed=changeName>
      世界变化不停，人潮川流不息
    </About>
  </div>
</template>
<script>
  import {reactive} from 'vue';
  import About from './About';
  export default{
    components:{
      About,
    },
    setup(){
      const sendData = reactive({
        val:'sendData'
      })

      setTimeout(()=>{
        sendData.val+=1;
      },1000)

      function changeName(msg){
        console.log(`子组件传递了${msg}过来`)
      }
      return {
        sendData,
        changeName,
      }
    }
  }
</script>

//子组件 About.vue
<template>
  <div class="about">
    <button @click="fn">子改父</button>
  </div>
</template>
<script>
  import {watch} from 'vue';
  export default {
    props:{
      name:String
    },
    setup(props, context) {
      console.log(context,"上下文");
      let num=100;
      let fn=()=>{
        content.emit('name-changed',num)//相当于this.$emit()
       }
      return {
          fn
        }
    );
    },
  }
</script>

3.使用 ref、toRefs 绑定数据

<template>
  <div>
    <p>使用v-model双向数据绑定的数据内容是：{{ msg }}</p>
    <p>
      <!-- 自己实现双向数据绑定，监听input事件，动态修改nmsg的值 -->
      <input type="text" ref="myInput" @input="input" :value="nmsg" />
    </p>
    <p>使用@input事件动态实现双向数据绑定的数据内容是：{{ nmsg }}</p>
    <p>
      <!-- 使用ref方法动态定义并双向绑定hmsg -->
      <input type="text" v-model="hmsg" @input="hmagInpu" />
    </p>
    <p>使用ref方法动态定义并双向数据绑定的数据hmsg是：{{ hmsg }}</p>
    <p>toRefs 来实现在模板中不需要追加 state 调用数据：{{ msg }}</p>
  </div>
</template>
<script>
import {
  defineComponent,
  reactive,
  getCurrentInstance,
  toRefs,
  ref,
  computed,
} from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      msg: "",
      nmsg: "",
      cmsg: computed(() => {
        // 1.计算属性
        return state.msg.length;
      }),
    });

    // 2.可以使用getCurrentInstance hook 来拿到当前实例化对象上下文信息，但是除非极其特殊的情况，否则不建议这样使用
    const { ctx } = getCurrentInstance();
    const input = () => {
      // 在vue3中，因为是面向hooks函数编程，所以，无法通过this拿到当前vue实例化对象
      console.log(ctx.$refs.myInput.value); // 像使用vue2中的this一样，使用ctx（上下文内容信息）
      state.nmsg = ctx.$refs.myInput.value;
    };

    // 3.使用ref方法来定义一个响应式监听的对象，在实际开发中我们都是用这种方法来构建响应式对象
    const hmsg = ref("abc");
    const hmagInpu = () => {
      // 在内部使用hmsg的值，需要使用value来获取对应的值
      console.log("获取到的hmsg值是：" + hmsg.value);
    };

    return {
      // 4.使用toRefs hook方法方便，访问msg不需要使用state.msg，直接msg就可以获取到
      ...toRefs(state),
      hmsg,
      input,
      hmagInpu,
    };
  },
});
</script>
小结：两种构建响应式对象的方法
1.reactive

1.reactive方法，直接传入一个对象 state ,这个对象就是 proxy 拦截的对象
2.然后再把这个 state 对象直接 return 出去就能被调用
3.在 temolate 中使用 state.msg 来访问
4.在 js 中也使用 state.msg 来访问

2.ref

1.使用 ref 直接声明一个 proxy 响应式对象 msg
2.然后把这个 msg 对象直接 return 出去
3.在 template 中直接使用 {{msg}}
4.注意：在 js 中需要使用 msg.value

4.watch、watchEffect 数据监听

<template>
  <div>
    <h1>watch、watchEffect 数据监听</h1>
    <p>{{ msg }}</p>
    <p>{{ msg2 }}</p>
    <p>{{ info }}</p>
    <p>
      <button @click="changeMsg">changeMsg</button>
    </p>
    <p>
      <button @click="changeMsg2">changeMsg2</button>
    </p>
  </div>
</template>
<script>
import { defineComponent, reactive, watchEffect, watch, toRefs } from "vue";

export default defineComponent({
  name: "watch",
  // setup钩子函数
  setup() {
    // 使用响应式函数reactive构建proxy响应式对象state
    const state = reactive({
      msg: "时光",
      msg2: "kity",
      changeMsg2: () => {
        state.msg2 = "kity，你好";
      },
    });
    const changeMsg = () => {
      // 在外边定义methods
      state.msg = "时光，改变";
      info = "hello，改变";
    };
    let info = "hello";
    // watch监听只能是 getter/effect 函数、ref、reactive对象或数组
    // 简单监听
    watch(state, () => {
      console.log("观察整个state中属性变化", state.msg); // 只要state中的值有变化，就会打印
    });
    // 监听指定的信息
    watch(
      () => state.msg,
      (newVal, oldVal) => {
        console.log("01-msg的新值是:" + newVal + "-------旧值是:" + oldVal);
      }
    );
    // 监听多个属性（数组形式）
    watch([() => state.msg, () => state.msg2], (newVal, oldVal) => {
      console.log("02-msg的新值是:" + newVal + "-------旧值是:" + oldVal); // 02-msg的新值是:时光，你好,俞亮-------旧值是:时光,俞亮
    });
    // 不需要指定监听的属性
    watchEffect(() => {
      // 程序运行时，初始化就会执行一次，完成监听准备工作
      console.log("03-watchEffect监听 state 中数据变化：", state.msg); // 有点像computed计算属性，用到的数据发生改变才会执行
    });

    // 使用时，要把对象return出去，才能在template中使用
    return {
      ...toRefs(state),
      info,
      changeMsg,
    };
  },
});
</script>

5.生命周期

  1. setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
  2. onBeforeMount() : 组件挂载到节点上之前执行的函数。
  3. onMounted() : 组件挂载完成后执行的函数。
  4. onBeforeUpdate(): 组件更新之前执行的函数。
  5. onUpdated(): 组件更新完成之后执行的函数。
  6. onBeforeUnmount(): 组件卸载之前执行的函数。
  7. onUnmounted(): 组件卸载完成后执行的函数
  • 若组件被<keep-alive>包含，则多出下面两个钩子函数。
  1. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
  2. onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。
Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated

使用写法

    let {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered} = Vue;

export default {

 // setup相当于vue2中的beforeCreate和created，并且在两者之前执行
      setup(){
        let test = ref('测试')

        // 挂载开始之前被调用
        onBeforeMount(()=>{
          console.log('onBeforeMount',test)
        })

        // 实例被挂载后调用，不会保证所有的子组件也被挂载完
        onMounted(()=>{
          console.log('onMounted',test)
        })

        // DOM更新前
        onBeforeUpdate(()=>{
          console.log('onBeforeUpdate',test)
        })

        // DOM更新后，不会保证所有的子组件也都一起被重绘
        onUpdated(()=>{
          console.log('onUpdated', test)
        })

        // 卸载组件实例之前，此时实例仍然是完全正常的
        onBeforeUnmount(()=>{
          console.log('onBeforeUnmount', test)
        })

        // 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
        onUnmounted(()=>{
          console.log('onUnmounted', test)
        })

        // 当捕获一个来自子孙组件的错误时被调用
        onErrorCaptured(()=>{
          console.log('onErrorCaptured',test)
        })

        // 跟踪虚拟 DOM 重新渲染时调用
        onRenderTracked(()=>{
          console.log('onRenderTracked',test)
        })

        // 当虚拟 DOM 重新渲染为 triggered.Similarly 为renderTracked，接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。
        onRenderTriggered(()=>{
          console.log('onRenderTriggered',test)
        })

        return {test};
      }
}

vue3如何使用axios

  1. 安装vue add axios
  2. 删除main.js
    import './plugins/axios
  3. 使用
import axios from "axios";
onMounted(() => {
      fetch();
    });
    function fetch() {
      axios.get("http://jsonplaceholder.typicode.com/users").then((res) => {
        console.log(res);
      });
    }

6.TodoList

<template>
  <div>
    <h1>TodoList 点餐</h1>
    <h2>菜单列表</h2>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item.name}} 价格 {{item.price}}
        <button @click="add(index)">点餐</button>
      </li>
    </ul>
    <h2>已点菜单</h2>
    <ul>
      <li v-for="(item, index) in aList" :key="index">
        {{item.name}} 价格 {{item.price}}
        <button @click="remove(index)">取消</button>
      </li>
    </ul>
    <h3>一共点了 {{count}} 道菜，消费 {{allPrice}} 元</h3>
  </div>
</template>

<script>
import { defineComponent, reactive, computed, toRefs } from "vue";

export default defineComponent({
  setup() {
  
    // 浮点数相加处理
    const add = (num1, num2) => {
      // 将第一个数转成字符串，取小数点后的部分，记录小数点后的位数
      const a1 = ('' + num1).split('.')[1] ? ('' + num1).split('.')[1].length : 0;
      const a2 = ('' + num2).split('.')[1] ? ('' + num2).split('.')[1].length : 0;
      // 取较大的位数，获得10的指数幂
      const m = Math.pow(10, Math.max(a1, a2));
      // 处理成整数相加，再除以指数
      return (num1 * m + num2 * m) / m;
    }
    
    const state = reactive({
      list: [
        {
          name: '四喜丸子',
          price: 20.88
        },
        {
          name: '狮子头',
          price: 30.88
        },
        {
          name: '辣子鸡',
          price: 40.88
        },
        {
          name: '糖醋鲤鱼',
          price: 50.88
        },
      ],
      aList: [],
      count: computed(() => {
        return state.aList.length;
      }),
      allPrice: computed(() => {
        let allPrice = 0;
        state.aList.map(item => {
          // allPrice += item.price // js 中，浮点数相加会与实际结果有差异，因为在 js 编译的过程中，浮点数保存并不是精确的
          allPrice = add(allPrice, item.price);
        })
        return allPrice
      }),
      add: (index) => {
        console.log('你点的是：', state.list[index]);
        state.aList.push(state.list[index]);
      },
      remove: (index) => {
        console.log('你取消了：', state.aList[index]);
        state.aList.splice(index, 1)
      }
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
  li{
    margin:20px;
  }
</style>
star@星空
关注
  • 32
    点赞
  • 踩
  • 132
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
全新升级基于Vue3最新标准课程
08-10
全新升级基于Vue3最新标准课程，2022年8月最新升级版，一共14章，附电子书和源码下载！！ 本课程将基于Vue全新的 <script setup> 语法，手把手带你重写vue-element-admin，不仅能提升你策划方案的能力，更能解决场景众多、功能繁复的后台前端项目中的难题，助力你成为集技术、方案、高效开发于一身的综合性大牛！
vue3.0初学语法.md
08-04
vue3.0初学语法.md
总结vue3常用的基础语法
luguanyou的博客
04-01 754
vue3常用的基础语法包括：列表的渲染、条件判断、样式绑定、vue指令、表单事件处理、响应式数据、生命周期、watch监听、计算属性computed()、组件的基础。
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
vue3写法，基于＜script setup＞语法糖
ajaxsync
07-18 1359
vue3的setup语法糖常用的写法，总结了：基础写法、组件通信props、emit，访问路由等
Vue3.0的新特性（2）生命周期函数
weixin_43365995的博客
02-28 651
vue3新增了生命周期钩子，我们可以通过在生命周期函数前加`on`来访问组件的生命周期，我们可以使用以下生命周期钩子
vue3入门
zlting_的博客
07-25 1229
笔记
Vue3语法大全
weixin_61719769的博客
03-17 4747
本篇博客可以让您更好地了解Vue3，并为您在开发Vue应用程序时提供有用的。
vue3 = =
jia632133535的博客
01-03 571
Vue3.0中的生命周期做了一些改动：这是组合api的生命周期 beforeCreate -> setup() 开始创建组件之前，创建的是data和method created -> setup() beforeMount -> onBeforeMount 组件挂载到节点上之前执行的函数。 mounted -> onMounted 组件挂载完成后执行的函数 beforeUpdate -> onBeforeUpdate 组件更新之前...
关于vue3生命周期的使用、了解以及用途（详细版）
老余的博客
02-22 1万+
每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
Vue 3模板语法.pdf
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
vue3语法记录 vue3语法记录
最新发布
04-20
vue3语法记录vue3语法记录vue3语法记录vue3语法记录
基础知识(Vue3)
MM_520131400的博客
04-23 2081
Vue3
Vue3基础语法
wushangnb的博客
02-28 3198
文章目录一、内置指令1.文本渲染2.属性渲染3.条件渲染4.列表渲染5.事件二、自定义指令三、计算与监听1.计算 computed2监听 watch 一、内置指令 内置指令 v- 开头的特殊属性 ，联系html模板与JavaScript数据模型 1.文本渲染 v-text v-html {{msg}} 只能写一行表达式，不能写复杂js 2.属性渲染 v-bind :属性名=“值” 缩写 ：属性名=“值” 3.条件渲染 v-if 隐藏式移除节点 v-else if v-else v
vue3编写组件的几种方式
qq_45787691的博客
10-13 6921
vue3编写组件的几种方式，vue3的选项式写法，组合式写法；如何在vue3中编写vue2的代码。
Vue3 基础语法
code袁的博客
05-09 1143
项目文件下运行 npm init vue@latest。1.在父组件在vue3中引入子组件，直接使用，不需要注册。ref执行的响应式数据，要用.value接受,2.在子组件通过defineProps接受数据。provide 发送消息，inject接受消息。调用computed，返回值用一个常量接受。2.watch 默认是监听ref浅层监听。vue3的生命周期和vue2类似。响应式api，完成响应式数据。1.监听单个值的变化。2.监听多个值的变化。
Vue3的新写法总结
Null
07-18 1228
【代码】Vue3的写法总结。
vue基础 - 24 （vue3 生命周期：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted）
热门推荐
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-05 3万+
setup相当于之前的created周期：创建时 onBeforeMount：DOM即将挂载 onMounted：DOM挂载完毕 onBeforeUpdate：DOM即将更新 onUpdated：DOM更新完毕 onBeforeUnmount：即将销毁 onUnmounted：销毁完毕 <script lang="ts"> import { defineComponen...
vue3 router语法
01-10
以下是Vue Router的一些基本语法和用法： 1. 安装Vue Router： ```shell npm install vue-router ``` 2. 创建路由实例： ```javascript import { createRouter, createWebHistory } from 'vue-router' ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

star@星空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值